import React, { Component } from 'react';
import { Table, Dialog, Button } from '@icedesign/base';

const Column = Table.Column;
// const limitContent = (value, index, record) => {
//   // console.log(typeof value, "value:", value,"index:", index, 'record:', record)
//   let content = value && (value.length > 42 ? value.substring(0, 42) + '...' : '');
//   // console.log(value, index, record);
// return (<span> 
//   {content} <a>查看</a>
//   </span>
//   );
// }
/**
 * 本年度其他违规项表格
 */
export default class OtherDeductTable extends Component {
  static displayName = 'OtherDeductTable';
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      content: ''
    };
  }
  onOpen(content, e) {
    this.setState({
      visible: true,
      content
    });
    e.preventDefault();
  }
  onClose = () => {
    this.setState({
      visible: false
    });
  }
  limitContent = (value, index, record) => {
    // console.log(typeof value, "value:", value,"index:", index, 'record:', record)
    let summary = value && (value.length > 42 ? value.substring(0, 42) + '...' : '');
    return (<span> 
      {summary} <a href="#" onClick={this.onOpen.bind(this, value)} >查看</a>
      </span>
      );
  }
  render (){
    let props = this.props;
    const {content} = this.state;
    return (
      <div style={{padding: '20px'}}>
        <Table dataSource={props.list} isLoading={props.isLoading} maxBodyHeight={235} fixedHeader={true}>
          <Column title="序号" width="12%" align="center" dataIndex="serial_number"/>
          <Column title="事项内容" width="40%" align="center" dataIndex="content" cell={this.limitContent}/>
          <Column title="处理原因说明" width="36%" align="center" dataIndex="reason"/>
          <Column title="时间" width="12%" align="center" dataIndex="date"/>
        </Table>

        <Dialog
            visible={this.state.visible}
            onClose={this.onClose}
            hasMask={false}
            footer={false}
            className="supervise-dialog"
            title="事项内容"
          >
          <div>{content}</div>
        </Dialog>
      </div>
    );
  }
}